<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="letter in letters" >{{letter}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      letters:['张','A','B','C','D',]
    },
    methods:{
      btnClick(){
        //1. push方法：在数组的末尾添加一个或多个元素--->（响应式）
       // this.letters.push("aaa"); //this只的是app对象
        
        //2.pop方法：删除数组的最后一个元素--->（响应式）
       // this.letters.pop();
        
        //3.unshift方法：在数组的开头添加一个或多个元素--->（响应式）
       // this.letters.unshift("ccc");
        
        //4.shift方法：删除数组的第一个元素--->（响应式）
       // this.letters.shift();
        
        //5.splice方法:可以用于删除数组中的指定元素和添加新的元素到指定位置和替换元素--->（响应式）
        // 删除元素：第二个参数传入你要删除几个元素，如果没有传，就删除后面所有元素
        // 替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
        // 插入元素：第二个参数，传入一个0，后面跟上要插入的元素
        //this.letters.splice(1,3,'哲','翰');
        
        //6.sort方法：根据Unicode编码对数组中的元素进行排序--->（响应式）
        //this.letters.sort();
        
        //7.reverse方法：该方法用来反转数组（前边的去后边，后边的去前边）--->（响应式）
        //this.letters.reverse();
        
        //8.注意：1.通过索引修改数组中的元素--->（非响应式）
        //       2.可以通过splice()来替换元素--->（响应式）
        //       3.或者 用vue里的set方法来替换元素--->（响应式）
        //            set(要修改的对象，索引值，修改后的值)
        //this.letters[0]="bbb"; // 点击按钮数组已经改变了，但页面上没有改变。
        //this.letters.splice(0,1,'bbb');
        Vue.set(this.letters,0,'bbb');
        
      }
    }
  })
  
  
  
  //  ...num: 可变参数 ，可以传任意多少个实参进来, 把传入的多个值放入数组里面
  function sum(...num){
    console.log(num); // [1,2,3,45,56]
  }
  sum(1,2,3,45,56);
</script>
</body>
</html>